<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>

<html>
<head>

	<link rel="stylesheet" type="text/css" href="css/button.css">
	<link rel="stylesheet" type="text/css" href="css/bkp.css">
	<script type="text/javascript" src="js/jquery-1.4.1.js"> </script>	
	<script type="text/javascript" src="js/mapsUtils.js"> </script>
	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAZA3w8jEem5JlBtbgiylugRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRtd1TYFkicSI0Fz2ds_MoXhoumtQ" type="text/javascript"></script>

	<script type="text/javascript">			
	var urlService = "http://localhost:8888/resources/touristPoint";

	function teste(){
		 alert("in LoadMap");
	}

	function loadMap() {		 		  
		if (GBrowserIsCompatible()) {
			
			var map = new GMap2(document.getElementById("map_canvas"));		    
		    map.addControl(new GSmallMapControl());		
		    map.addControl(new GMapTypeControl());
		    
		    //Obtem lista de pontos e seta-os no mapa
			$.getJSON(urlService, function(data){	  	        	      									 					
						$.each(data.touristPoint , function(i, n){							

							  //Inser row in table content list 
							  insertRowTable(n);
							  var geoPoint = new GLatLng(n.lat, n.lng);
							    
							  //centraliza mapa no ultimo marker
							  map.setCenter(geoPoint, 13);	
							  							  
							  //Set icon
							  var customIcon = new GIcon();
							  customIcon.iconSize = new GSize(32, 32);
							  customIcon.iconAnchor = new GPoint(16, 16);
							  customIcon.infoWindowAnchor = new GPoint(16, 0);
							  customIcon.image = n.category.imagePath; 																
							  var marcador = new GMarker(geoPoint, { icon:customIcon });
							  
  	  						  //add marker
 						      map.addOverlay(marcador);		
 						  	  // create event to click in marker
  						   	  GEvent.addListener(marcador, "click", 
					   			//create window with information about marker
 					   			function() { 		 		
			  						var maxContentDiv = document.createElement("div");
			  						maxContentDiv.innerHTML = "Loading...";
			  						marcador.openInfoWindowHtml("<div style='width: 110px; height: 80px'>" +
																"<b>" + n.name + "</b><br/>" + n.address +														  								 
			  													"</div>");								
				  						  					});					  						     
							  							  
						});							
		        	});        				
		}		  								  
	}	


	
	 // Função responsável por inserir linhas na tabela
    function insertRowTable(point) {
    	
        // Captura a referência da tabela com id minhaTabela
        var table = document.getElementById("listPointsTable");
        // Captura a quantidade de linhas já existentes na tabela
        var numOfRows = table.rows.length;
        // Captura a quantidade de colunas da última linha da tabela
        var numOfCols = 2;

        // Insere uma linha no fim da tabela.
        var newRow = table.insertRow(numOfRows);         
        newRow.setAttribute('height', '50');
        
     	// Insere uma coluna na nova linha 
        cellIcon = newRow.insertCell(0);             
        
        // Insere um conteúdo na coluna
        cellIcon.innerHTML = "<img src="+ point.category.imagePath+"> <br/>";

     	// Column with point information 
        cellInfo = newRow.insertCell(1);                
        cellInfo.innerHTML = "<b> <a href=/touristPointDetails.jsp?id="+ point.idTouristPoint +">" + point.name + "</a> </b> <br/> " + point.address;

     	// Insere uma coluna na nova linha 
        cellDelete = newRow.insertCell(2);
        
        // Insere um conteúdo na coluna        
        cellDelete.innerHTML = "<a class='button' onclick=deletePoint("+point.idTouristPoint+");><span>Delete</span></a>";

     	// Insere uma coluna na nova linha 
        cellEdit = newRow.insertCell(3);
        
        // Insere um conteúdo na coluna        
        cellEdit.innerHTML = "<a class='button' onclick=deletePoint("+point.idTouristPoint+");><span>Edit</span></a>";
        
    }
		 	
	function deletePoint(id){
		alert("http://localhost:8888/resources/touristPoint/"+id);
		$.ajax({
			   type: "delete",
			   url: "http://localhost:8888/resources/touristPoint/"+id,
			   dataType: "json", success: function(data, textStatus) {
	          if (data['ok'] == true) {
	        	  alert( "ok" );
	              
	            } else {
	              alert( "Oooops!, something failed" );
	            } 
	          }
	  			   
			 });			  	 	 						
	}
	</script>
	<title>List Points</title>
</head>

<body onload="loadMap()"  onunload="GUnload()">
	
<div class="pageInstruction">
Lista de pontos de carregamento
</div>

<div id="contentLayer">

	<table class="t1">
		<tr valign="top">
		
			<!-- Coluna com descricao dos pontos -->
			<td class="formContentStyle">		
			<div class="contentHolder">
				<div class="inputLayer">			
					
					<table id="listPointsTable" class="t2" class="contentHolderCell" border="0" cellspacing="0" cellpadding="0" >
					
						<!-- List of registred points -->
						<tr>
							<!-- this list is created dinamically -->				
						</tr>																		
					</table>
				</div>
			</div>		
					
			</td>
	
			<!-- Coluna do mapa -->
			<td valign="top" class="preview" >
				<!-- Div onde o mapa será renderizado -->
				<div id="map_canvas" style="widht: 200px; height: 350px"></div>												
			</td>
			<!-- FIM Coluna do mapa -->
		</tr>
	
	</table>
</div>
<br>
<div class="footer" align="center">page footer...</div>
</body>
</html>